<template>
  <div class="home">
    <div class="main">
      <h2>残疾人档案信息管理平台</h2>
      <div class="rem">
      <input
        type="text"
        class="input1"
        placeholder="请输入您的账号"
        v-model="ID"
      />
      <input type="password" class="input2" placeholder="密码" v-model="pwd" />
      <van-checkbox v-model="checked" class="chex">记住账号</van-checkbox>
      </div>
      <input
        type="submit"
        value="登录"
        class="sub"
        @click="go($event, ID, pwd)"
        id="sub"
      />
      <div class="foot">
        <p>版权所有：杭州杰麦训科技有限公司</p>
        <span>系统版本：V201906233001</span>
      </div>
      <div></div>
    </div>
  </div>
</template>
<script>
import { login } from '../../apiCanJi/apiCanji'
export default {
  data () {
    return {
      checked: false,
      states: true,
      ID: '',
      pwd: '',
      state: '',
      msg: {},
      xx: 11111
    }
  },
  methods: {
    go () {
      if (this.ID == '' && this.pwd == '') {
        this.$toast('请输入账号密码!')
      } else if (this.ID == '' && this.pwd !== '') {
        this.$toast('请输入账号!')
      } else if (this.ID !== '' && this.pwd == '') {
        this.$toast('请输入密码!')
      } else {
        login({
          username: this.ID,
          password: this.pwd
        }).then((res) => {
          if (res == '' || res.length == 0) {
            this.$toast('账号密码有误!')
          } else {
            var id = res[0].id
            this.$router.push('about')
            localStorage.userid = JSON.stringify({ id })
            if (this.checked) {
              var str = JSON.stringify({ usermame: this.ID, pwd: this.pwd })
              localStorage.usermsg = str
            }
          }
        })
      }
    },

    aa () {
      let but = document.getElementById('sub')
      if (localStorage.usermsg == undefined || localStorage.usermsg == '') {
        this.msg = {}
      } else {
        this.msg = JSON.parse(localStorage.usermsg)
        this.ID = this.msg.usermame
        this.pwd = this.msg.pwd
        but.style.background = '#1DABF2'
        this.states = false
      }
    }
  },
  mounted () {
    this.aa()
  },
  created () {
    document.title = '登录'
  }
}
</script>
<style scoped>
.home {
  width: 100%;
}
.main {
  width: 100%;
  margin-top: 112px;
  position: relative;
  display: inline-block;
}
h2 {
  width: 273px;
  margin: 0px;
  /* margin-left: 31.5px; */
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  margin: 0px auto;

}
input {
  width: 267px;
  margin-top: 95px;
  height: 48px;
  margin-bottom: 9.5px;
  border-radius: 50px;
  border: 0px;
  /* margin-left: 31.5px; */
  padding-left: 44px;
  color: #55baf5;
  font-weight: bold;
  margin: 0px auto;

}
::placeholder {
  color: #55baf5;
}
.input1 {
  background: #f3fbfe url(../../assets/image/admst.png) no-repeat 16px 17px;
  background-size: 14px;
  font-size: 15px;
}
.input2 {
  margin-top: 0px;
  background: #f3fbfe url(../../assets/image/pwd.png) no-repeat 16px 17px;
  background-size: 14px;
  font-size: 15px;
}
.chex {
  /* width: 16px; */
  /* height: 16px; */
  margin-top: 15.5px;
  /* margin-left: 31.5px; */
  font-size: 15px;
}
.rem{
  width: 311px;
  margin: 0px auto;
}
.sub {
  width: 311px;
  text-align: center;
  padding: 0px;
  color: #fff;
  background-color: #1dabf2;
  margin-top: 44px;
  font-size: 14px;
  display: flex;
   justify-content:center;
}
.foot {
  /* width: 143px; */
  height: 8.5px;
  font-size: 9px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  text-align: center;
  margin-top: 114.5px;

}
#ss {
  width: 247px;
  height: 40px;
  border: 1px solid #f00;
  margin-left: 31.5px;
  position: absolute;
  top: 160px;
  background-color: #fff;
  line-height: 40px;
  font-size: 15px;
  display: none;
  padding-left: 20px;
}
</style>
